<template>
  <div class="CartMain">
    <!-- 第一条 -->
    <p>
      <van-checkbox v-model="checked" checked-color="red" class="xuanze"></van-checkbox>
      <span>特价抢购中  </span>
      <img src="../../public/img/1.jpg">
      <span class="miaoshu">繁华声遁入空门，折煞了世人。门偏冷辗转一生，情债又几本。</span>
      <span>￥<span>123</span></span>
      <span>
        自营仓商品包邮到家
      </span>
      <van-stepper v-model="value" input-width="23px" button-size="22px" id="nuu"/>
      <span>×</span>
      <span>123</span>
      <CartAll></CartAll>
    </p>
  </div>
</template>

<script>
import { Toast } from 'vant';
import CartAll from "../components/CartAll";

  export default {
  data() {
    return {
      checked: false,
      activeIcon: 'https://img01.yzcdn.cn/vant/user-active.png',
      inactiveIcon: 'https://img01.yzcdn.cn/vant/user-inactive.png',
      value:1
    };
  },
  components:{
    CartAll
  },
  methods: {
    onChange(value) {
      Toast.loading({ forbidClick: true });

      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        Toast.clear();
        // 注意此时修改 value 后会再次触发 change 事件
        this.value = value;
      }, 500);
    },
    // 事件
  },
};




  

</script>

<style scoped>
  .CartMain{
    width: 100%;
    background-color:#EEEEEE;
    margin-top: 0.43rem;
    overflow: hidden;
    /* height: 4rem;
    background-image: url(../../public/img/kong.png); */
    background-repeat: no-repeat;
    background-position:1.1rem 0.65rem;
  }
  .CartMain>p{
    width: 3.57rem;
    height: 1.57rem;
    background-color: white;
    margin: 0.1rem auto 0.1rem;
    border-radius: 0.09rem;
    position: relative;
  }
  .CartMain>p>.xuanze:nth-child(1){
    position: absolute;
    top: 0.7rem;
    left: 0.08rem;
  }
  .CartMain>p>span:nth-child(2){
    display: inline-block;
    font-size: 0.1rem;
    color: rgb(124, 74, 9);
    border: rgb(124, 74, 9) solid 0.02rem;
    padding: 0.01rem;
    border-radius: 0.05rem;
    position: absolute;
    top: 0.1rem;
    left: 0.36rem;
  }
  .CartMain>p>img{
    width: 0.86rem;
    height: 0.86rem;
    background-color:steelblue;
    position: absolute;
    top: 0.4rem;
    left: 0.37rem;
  }
  .CartMain>p>.miaoshu{
    display: inline-block;
    width: 1.65rem;
    height: 0.36rem;
    position: absolute;
    left: 1.33rem;
    top: 0.38rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.14rem;
  }
  .CartMain>p>span:nth-child(5){
    display: inline-block;
    font-size: 0.14rem;
    color: red;
    position: absolute;
    left:1.33rem;
    top:1.06rem;
  }
  .CartMain>p>span:nth-child(5)>span{
    color: red;
    font-size: 0.14rem;
  }
  .CartMain>p>span:nth-child(6){
    font-size: 0.1rem;
    text-indent: 0.18rem;
    background-image: url(../../public/img/lithome.png);
    background-repeat: no-repeat;
    background-size: 0.17rem;
    position: absolute;
    left:0.37rem;
    bottom:0.07rem;
  }
  .CartMain>p>#nuu{
    display: inline-block;
    position: absolute;
    bottom:0.31rem;
    right: 0.5rem;
  }
  .CartMain>p>span:nth-child(8){
    background-color:red;
    display: inline-block;
    width: 0.17rem;
    height: 0.17rem;
    color: white;
    text-align: center;
    line-height: 0.17rem;
    border-radius: 50%;
    font-size: 0.20rem;
    position: absolute;
    right: 0.2rem;
    top:0.4rem;
  }
  .CartMain>p>span:nth-child(9){
    opacity:1;
    position: absolute;
    right: 1.3rem;
    bottom:0.31rem;
  }
</style>
